<script>
import { defineComponent, computed, h } from 'vue';
import { QExpansionItem, QIcon } from 'quasar';
import useNodeTreeStore from 'src/stores/nodeTree';
export default defineComponent({
  name: 'TreeComponent',
  props: {
    root: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const nodeTreeStore = useNodeTreeStore();
    const lockChange = (node) => {
      let lock = !nodeTreeStore.treeMap[node.id].lock;
      const recursive = (node) => {
        node.lock = lock;
        if (node.children) {
          node.children.forEach((item) => {
            recursive(item);
          });
        }
      };
      recursive(nodeTreeStore.treeMap[node.id]);
    };
    const onClick = (node) => {
      console.log('tree click', node);
      nodeTreeStore.setActiveNode(nodeTreeStore.treeMap[node.id]);
    };
    const Node = defineComponent({
      name: 'ItemCom',
      props: {
        node: {
          type: Object,
          default: () => ({}),
        },
      },
      setup(props) {
        return () =>
          h(
            'div',
            {
              onClick: () => onClick(props.node),
              class: `q-pa-md tw-w-full item ${nodeTreeStore.activeNode?.id === props.node.id ? 'item-active' : ''}`,
            },
            [
              h(
                'div',
                {
                  class: `label tw-cursor-pointer hover:tw-text-primary`,
                },
                props.node.label,
              ),
              h(
                'div',
                {
                  class: 'icons',
                },
                [
                  h(
                    'div',
                    {},
                    h(QIcon, {
                      onClick: () => lockChange(props.node),
                      name: props.node.lock ? 'lock' : 'lock_open',
                      class: 'tw-w-18px tw-h-18px icon ',
                    }),
                  ),
                ],
              ),
            ],
          );
      },
    });
    const tree = (node) => {
      if (node.children && node.children.length > 0) {
        return h(
          QExpansionItem,
          {
            label: node.label,
            defaultOpened: true,
            contentInsetLevel: 0.2,
            expandIconToggle: true,
            // switchToggleSide: true,
          },
          {
            header: () => {
              return h(Node, { node });
            },
            default: () =>
              h(
                'div',
                { class: 'q-pa-md' },
                node.children.map((item) => {
                  return tree(item);
                }),
              ),
          },
        );
      } else {
        return h(Node, { node });
      }
    };
    const treeRender = computed(() => {
      return tree(props.root);
    });
    return {
      treeRender,
    };
  },
  render(that) {
    return that.treeRender;
  },
});
</script>
<style scoped lang="scss">
.item {
  // border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  position: relative;
  // width: 180px;
  overflow: hidden;
  .label {
    // flex: 1;
    width: 150px;
  }
  .icon {
    font-size: 18px;
    display: none;
  }
  .icons {
    width: max-content;
    // position: absolute;
    // right: 10px;
  }
  &:hover {
    color: $primary;
  }
  &:active {
    transform: scale(0.98);
  }
}

.item-active {
  color: $primary;
  border-bottom: 1px solid $primary;
  // box-shadow: 0px 1px 5px $primary;
  .icon {
    display: block;
  }
}
</style>
